<template>
    <div class="goods-item">
        <img :src="imgH+goods.img" class="img" alt="">
        <div class="name">
            {{goods.name}}
        </div>
        <div class="info">
            {{goods.info}}
        </div>
        <div class="prices">
            <span class="price">￥{{goods.nowPrice}}</span>
            <span class="sale">￥{{goods.oldPrice}}</span>
        </div>
    </div>
</template>

<script>
    export default {
        props:{
            goods:Object
        },
        data(){
            return {

            }
        },
        computed:{
            imgH(){
                return process.env.VUE_APP_IMG_DOMAIN
            }
        }
    }
</script>

<style scoped lang="stylus">
    .goods-item
        background-color white
        width 165px
        padding 5px
        .img
            width 165px
            height 165px
            border-radius 5px
        .name
            text-overflow ellipsis
            white-space nowrap
            overflow hidden
            margin 10px 0 0px
            font-size:16px;
            font-weight:400;
            color:rgba(111,111,111,1);
            line-height 16px
        .info
            text-overflow ellipsis
            white-space nowrap
            overflow hidden
            font-size:10px;
            font-weight:300;
            color:rgba(161,161,161,1);
            margin 8px 0
        .prices
            font-size 0
            .price
                font-size:16px;
                font-weight:400;
                color:rgba(241,101,46,1);
                line-height:16px;
            .sale
                text-decoration line-through
                margin-left 5px
                font-size:10px;
                font-weight:300;
                color:rgba(161,161,161,1);
                line-height:10px;



</style>